<template>
  <div class="table-container-inner flexOne setFlexBox">
    <!-- <el-table
      :height="store.state.dynamic.tableHeight"
      v-loading="loading"
      :data="dataList"
      border
      size="medium"
      :cell-style="cellStyle"
      class="table-fixed"
    >-->
    <div class="table-height flexOne">
      <el-table
        height="calc(100% - 10px)"
        v-loading="loading"
        :data="dataList"
        border
        :key="refreshKey"
        size="medium"
        :cell-style="cellStyle"
        class="table-fixed"
        ref="singleTable"
        v-show="refreshFlag"
      >
      <!-- :data="dataList" -->
        <el-table-column
          v-for="item in viewData"
          :key="item.ctTitle"
          :min-width="item.ctWide.indexOf('%') > 0 ? item.ctWide: 0"
          :width="item.ctWide.indexOf('%') > 0 ? 0: item.ctWide"
          :prop="item.ctName"
          :label="item.ctTitle"
          :align="item.ctAlign"
          header-align="center"
          show-overflow-tooltip
          :scoped-slot="labelHead"
        ></el-table-column>
        <el-table-column
          label="操作"
          :show-overflow-tooltip="false"
          align="center"
          class-name="small-padding fixed-width"
          width="120"
          v-if="ctUrl != null && ctUrl != ''"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="medium"
              icon="el-icon-postcard"
              @click="handleQuery(scope.row)"
              title="查看"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      class="paginationPage"
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { checkPermi } from '@/utils/permission.js'
import { tableData, delmisTableData } from './tableData'
import { setFinishMessage } from '@/api/spsMyInfo/message'
import store from '@/store/index'
import { getFunNo } from '@/utils/party'
import { encrypt } from '@/utils/aesCrypto'

export default {
  name: 'queryDynamicList',
  props: {
    // 组件需要获取的值
    viewData: {
      type: Array,
      default: () => {
        return []
      },
    },
    // 查询参数
    queryParams: {
      type: Object,
      default: () => {
        return {}
      },
    },
    permissionPrefix: {
      type: String,
      default: () => {
        return 'dynamic:button:'
      },
    },
    ctUrl: {
      type: String,
      default: () => {
        return null
      },
    },
  },
  data() {
    return {
      store: store,
      refreshKey: false,
      refreshFlag: true,
      // 表格数据
      dataList: null,
      loading: true,
      // 选中数组
      ids: [],
      tableList: [],
      total: 0,
      funNo: getFunNo(this.$route),
      tableHeight: 0,
      // showButton: 'query',
      singleStore: null,
      showOperate: true,
    }
  },
  created() {
    this.singleStore = store.getters.singleStore['main' + this.funNo]
  },
  methods: {
    labelHead(h, { column, index }) {
      let l = column.label.length
      let f = 16 //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
      column.minWidth = f * l //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度 //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
      return h('div', { class: 'table-head', style: { width: '100%' } }, [
        column.label,
      ])
    },
    cellStyle(data) {
      let style = 'padding:0px;'
      if (data.columnIndex == 1) {
        if (data.row.ct_end_name && data.row.ct_end_name == '未签发') {
          style += 'color:#f95a5a;'
        } else if (data.row.ct_end_name && data.row.ct_end_name == '已签发') {
          style += 'color:#21bd21;'
        }
      }
      return style
    },
    // 检查权限
    checkPermission(permissions) {
      return checkPermi(permissions)
    },
    // 获取列表
    getList() {
      const that = this
      that.refreshFlag = false
      this.loading = true
      tableData(this.queryParams)
        .then((response) => {
          this.dataList = response.rows
          this.total = response.total
          this.$nextTick(() => {
            this.loading = false
            that.refreshKey = !that.refreshKey
            that.refreshFlag = true
          })
        })
        .catch(() => {
          this.loading = false
          that.refreshFlag = true
        })
    },
    // 查看
    handleQuery(row) {
      row.handleType = 'view'
      this.handleAction(row)
    },
    // handle 动作函数
    handleAction(row) {
      if (row.ct_fun_no == undefined) {
        row.ct_fun_no = this.funNo
      }
      if (row.ct_buss_id) {
        row.ct_id = row.ct_buss_id
      }
      const tMisMessage = {
        ctFunNo: row.ct_fun_no,
        ctBussId: row.ct_id,
      }
      setFinishMessage(tMisMessage)
      let query = {
        ctFunNo: row.ct_fun_no,
        ctId: row.ct_id,
        ctIfEnd: row.ct_end_name == '已签发',
        handleType: 'view',
        name: this.$store.getters.name,
      }

      const that = this
      store.dispatch('publicRecord/setRecordParams', row).then(() => {
        const encryptQuery = {
          id: encrypt(JSON.stringify(query)),
        }
        // 二级详情打开
        if (that.$route.name == 'PublicRecord/Q9999') {
          that.$router.push({
            path: '/SpsPublicRouter/PublicRecord/Q9998',
            query: encryptQuery,
          })
        } else {
          that.$router.push({
            path: '/SpsPublicRouter/PublicRecord/Q9999',
            query: encryptQuery,
          })
        }
      })
    },
    // 附件预览 (需要在视图中增加左链接第一个附件id(ct_blob_id) ,如果存在才可以显示，否则提示不存在附件）
    handleFile(row) {
      if (row.ct_fun_no == undefined) {
        row.ct_fun_no = this.funNo
      }
      // 这里处理是否包含附件字段，如果不包含，则忽略
      if (!('ct_blob_id' in row)) {
        this.msgInfo('未配置附件显示信息，请联系管理员')
      } else {
        let blobid = row.ct_blob_id
        if (blobid) {
          store.dispatch('setFilePreview', row).then(() => {
            this.$router.push({ path: '/SpsPublicRouter/FilePreview' })
          })
        } else {
          this.msgInfo('附件不存在')
        }
      }
    },
  },
}
</script>

<style lang='scss' scoped>
::v-deep.table-head {
  font-size: 14px !important;
}
.table-container-inner {
  // position: absolute;
  // left: 0;
  // right: 0;
  // top: 0;
  width: 100%;
  height: 100%;
  .table-height {
    height: calc(100% - 70px);
  }
}
::v-deep.el-table__body-wrapper {
  height: calc(100% - 44px) !important;
}
</style>
